<div>
    <h3 class="header smaller lighter blue">
    	&nbsp;&nbsp;&nbsp;&nbsp;
    	<a href="/#/cluster_list">Cluster List</a>
        <span> > </span>
    	<a href="/#/cluster_list?clusterName={{clusterName}}">{{clusterName}}</a>
    	<span> > </span>
    	<span>详情</span>
    </h3>
    <div>
        <ul class="nav nav-tabs padding-18 tab-size-bigger" ng-if="dcs && dcs.length">
            <li ng-repeat="dc in dcs" ng-class="{'active': currentDcName == dc.dcName}">
                <a ng-click="switchDc(dc)" data-toggle="tab">
                    {{dc.dcName}}
                </a>
            </li>
        </ul>

        <div ng-if="dcs && dcs.length">
            <div class="col-xs-12">
                <div class="panel panel-primary" style="margin-top: 15px;" ng-repeat="proxyChain in chains">
                    <header class="panel-heading">
                        <div class="row">
                            <div class="col-md-6">{{proxyChain.shardId}}</div>
                        </div>
                    </header>

                    <table class="table table-bordered table-hover">
                        <thead>
                        <tr>
                            <th>active-dc-proxy</th>
                            <th>backup-dc-proxy</th>
                            <th>delete chain</th>
                            <th ng-repeat="(key, value) in proxyChain.metrics">{{key}}</th>
                        </tr>

                        </thead>
                        <tbody>
                            <tr>
                                <td><a ui-sref="proxy_tunnels({proxyIp: proxyChain.activeDcTunnel.proxyModel.hostPort.host, dcId: proxyChain.activeDcTunnel.proxyModel.dcName})">{{proxyChain.activeDcTunnel.tunnelStatsResult.backend.host}}:{backend: {{proxyChain.activeDcTunnel.tunnelStatsResult.backend.port}}, frontend: {{proxyChain.activeDcTunnel.tunnelStatsResult.frontend.port}} }</a></td>
                                <td><a ui-sref="proxy_tunnels({proxyIp: proxyChain.backupDcTunnel.proxyModel.hostPort.host, dcId: proxyChain.backupDcTunnel.proxyModel.dcName})">{{proxyChain.backupDcTunnel.tunnelStatsResult.backend.host}}:{backend: {{proxyChain.backupDcTunnel.tunnelStatsResult.backend.port}}, frontend: {{proxyChain.backupDcTunnel.tunnelStatsResult.frontend.port}} }</a></td>
                                <td>
                                    <a class="btn btn-danger btn-xs" ng-click="preCloseChain(proxyChain)">删除</a>
                                </td>
                                <td ng-repeat="(key, value) in proxyChain.metrics">
                                    <span class="hickwall" aria-hidden="true" ng-click="gotoHickwallWebSite(value, '_blank')"></span>
                                </td>
                            </tr>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div ng-if="(!dcs || !dcs.length) && clusterName">
            无shards
        </div>
    </div>
</div>

<xpipeconfirmdialog xpipe-dialog-id="'deleteChainConfirm'" xpipe-title="'删除Proxy链路'"
                    xpipe-detail="'您确定要删除该链路吗（链路删除后会重建新链路）?'"
                    xpipe-show-cancel-btn="true" xpipe-confirm="closeChain"></xpipeconfirmdialog>